<script setup lang="ts">

</script>

<template>

    <view class="container">
        <view class="header">
            <view class="name">
                <skeleton width="200rpx" height="20rpx"></skeleton>
                <skeleton width="200rpx" height="20rpx"></skeleton>
            </view>
            <view class="img">
                <skeleton width="100rpx" height="100rpx" circle></skeleton>
            </view>
        </view>
        <view class="center">
            <skeleton width="160rpx" height="30rpx"></skeleton>
            <view class="box">
                <view class="left">
                    <view class="item1">
                        <skeleton width="100%" height="100%"></skeleton>
                    </view>
                    <view class="item2">
                        <skeleton width="100%" height="100%"></skeleton>
                    </view>
                </view>
                <view class="right">
                    <view class="item3">
                        <skeleton width="100%" height="100%"></skeleton>
                    </view>
                    <view class="item4">
                        <skeleton width="100%" height="100%"></skeleton>
                    </view>
                </view>
            </view>
        </view>
        <view class="coursehall">
            <skeleton width="160rpx" height="30rpx"></skeleton>
            <Course></Course>
        </view>
    </view>
</template>



<style lang="scss" scoped>
.container {
    padding: 30rpx;
    background-color: #f6f6f6;

    .header {
        width: 100%;
        height: 120rpx;
        @include flex(space-between);
    }

    .center {
        margin-top: 35rpx;

        .box {
            margin-top: 30rpx;
            @include flex(space-between);

            .left {
                flex: 1;

                .item1 {
                    height: 260rpx;
                    background-color: $bgcolor;
                    margin: 0 15rpx 0 0;
                }

                .item2 {
                    height: 200rpx;
                    background-color: #48c977;
                    background-color: rgb(61, 184, 143);
                    margin: 30rpx 15rpx 0 0;
                    @include flex();
                }
            }

            .right {
                flex: 1;

                .item3 {
                    height: 200rpx;
                    background-color: $purple-color;
                    margin: 0 0 30rpx 15rpx;
                    @include flex();
                }

                .item4 {
                    height: 260rpx;
                    background-color: #f2ad41;
                    margin: 15rpx 0 0 15rpx;
                }
            }

            .item1,
            .item2,
            .item3,
            .item4 {
                border-radius: 20rpx;
                background: url('/static/images/boxbg.svg') no-repeat;
                overflow: hidden;
                background-size: cover; //或者background-size:100%;
                @include flex-column();
                color: #ffffff;

                image {
                    width: 100rpx;
                    height: 100rpx;
                }
            }
        }
    }

    .coursehall {
        margin-top: 35rpx;
    }
}
</style>
